.container {
    margin-top: 3em;
    margin-bottom: 6em;
}

.home .post-content {
    .note {
        margin-left: 0;
        border-radius: 5px;
        &:before {
            content: "";
            visibility: hidden;
        }
    }
}

.archive,
.post {
    flex: 6;
    width: 95%;
    border-radius: 10px;
    font-size: 16px;
    box-shadow: 0 3px 10px rgba(0,0,0,0.1);
    background-color: #444;
    article.post-block {
        padding: 40px 40px 30px;
        font-size: 16px;
    }
    h2.post-title {
        margin-top: 0;
        font-size: 30px;
        font-weight: 600;
    }
    ul.post-tag-list {
        display: inline-block;
        padding-left: 0;
        margin: 0 10px 0 -50px;
        padding: 6px 10px 8px;
        padding-left: 50px;
        border-radius: 0 5px 5px 0;
        position: relative;
        box-shadow: 0 1px 5px rgba(0,0,0,0.3),inset 0 1px 0 rgba(255,255,255,0.2),inset 0 -1px 0 rgba(0,0,0,0.3);
        background-color: #9e2812;
        background-image: url();
        background-image: linear-gradient(to bottom, #9e2812 0%, #6f0d0d 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9e2812', endColorstr='#6f0d0d',GradientType=0 );
        &:before {
            content: "";
            position: absolute;
            top: -10px;
            left: 0;
            border-color: transparent #6f0d0d #6f0d0d transparent;
            border-style: solid;
            border-width: 5px;
            width: 0;
            height: 0;
        }
        li.post-tag-item {
            display: inline-block;
            margin-right: 5px;
            font-weight: 600;
            text-transform: uppercase;
            text-shadow: 0 -1px 0 rgba(0,0,0,0.5);
        }
        .post-tag-link {
            color: white;
        }
    }
    .post-time {
        display: inline-block;
        color: #c0c0c0;
        font-weight: 600;
        text-shadow: 0 -1px 0 #000;
    }
}

.archive {
    ul.post-list {
        padding: 0;
        margin: 0;
        list-style-type: none;
    }
    li.post-list-item+li.post-list-item {
        margin-top: -10px;
        border-radius: 0 0 10px 10px;
        border-top: 1px solid #555;
        box-shadow: 0 -1px 0 #2f2f2f;
    }
}

.post-content {
    font-weight: 300;
    text-align: left;
    margin-top: 2em;
    h2, h3 {
        margin: 1em 0;
        font-size: 28px;
    }
    h4, h5, h6 {
        margin: 1em 0;
        font-size: 22px;
    }
    .header-anchor {
        visibility: hidden;
        opacity: 0;
        transition: all 0.5s;
    }
    h1:hover, h2:hover, h3:hover, h4:hover, h5:hover, h6:hover {
        .header-anchor {
            visibility: visible;
            opacity: 1;
        }
    }
    pre, code {
        display: inline-block;
        margin: 1px 2px;
        padding: 0 0.5em;
        line-height: 1.8em;
        font-family: Menlo, Consolas, "Courier New", Courier, "Liberation Mono", monospace;
        white-space: pre;
    }
    img {
        width: 100%;
    }
    li {
        padding-bottom: 5px;
    }
    p {
        word-wrap: break-word;
        margin: 1em 0;
        font-size: 16px;
    }
    & > table {
        width: 100%;
        margin: 1em 0;
        border-radius: 5px;
        background-color: #555;
        box-shadow: 0 1px 3px rgba(0,0,0,0.3);
        thead {
            border-top-left-radius: 5px;
            border-top-right-radius: 5px;
            color: #fff;
            background-color: #3a3a3a;
            background-image: url();
            background-image: linear-gradient(to bottom, #3a3a3a 0%, #1e1e1e 100%);
            filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3a3a3a', endColorstr='#1e1e1e',GradientType=0 );
        }
        th {
            position: relative;
            text-transform: uppercase;
            font-size: 16px;
            padding: .5em .75em;
            text-shadow: 0 -1px 0 rgba(0,0,0,0.9);
            color: #888;
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
            &:first-child {
                border-top-left-radius: 5px
            }
            &:last-child {
                border-top-right-radius: 5px;
            }
        }
        td {
            padding: .5em .75em;
            border-top: 1px solid #747474;
            border-top: 1px solid rgba(0,0,0,0.1);
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
            background: url();
            background-image: linear-gradient(to bottom, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 100%);
            filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1affffff', endColorstr='#00ffffff',GradientType=0 );
        }
    }
}

.note,
blockquote {
    position: relative;
    margin: 30px 0;
    margin-left: -50px;
    padding: 5px 15px 5px 20px;
    padding-left: 50px;
    border-radius: 0 5px 5px 0;
    box-shadow: 0 1px 5px rgba(0,0,0,0.3),inset 0 1px 0 rgba(255,255,255,0.2),inset 0 -1px 0 rgba(0,0,0,0.3);
    background-color: #7e6d42;
    background-image: url();
    background-image: linear-gradient(to bottom, #7e6d42 0%, #5c4e35 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7e6d42', endColorstr='#5c4e35',GradientType=0 );
    &:before {
        content: "";
        position: absolute;
        top: -10px;
        left: 0;
        width: 0;
        height: 0;
        border-width: 5px;
        border-style: solid;
        border-color: transparent #222 #222 transparent;
    }
    &:after {
        content: '\2605';
        position: absolute;
        top: 14px;
        left: 14px;
        font-size: 28px;
        font-weight: 700;
        color: #fc0;
        text-shadow: 0 -1px 0 rgba(0,0,0,0.5);
    }
    h5, p {
        color: #fff;
        margin: 0;
    }
    h5 {
        font-size: 24px;
        line-height: 1.5em;
        font-weight: 600;
        font-style: normal;
    }
    p {
        font-size: 16px;
        font-weight: 400;
    }
    br {
        display: none;
    }
    code {
        background-color: #333;
        background-color: rgba(0,0,0,0.2);
        margin-left: 2.5px;
        margin-right: 2.5px;
    }
    &.info {
        background-color: #0389aa;
        background-image: url();
        background-image: linear-gradient(to bottom, #0389aa 0%, #00617f 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0389aa', endColorstr='#00617f',GradientType=0 );
        &:before {
            border-color: transparent #00617f #00617f transparent;
        }
        &:after {
            content: '\24D8';
            color: #fff;
            position: absolute;
            top: 15px;
            left: 15px;
            font-size: 28px;
            font-weight: 700;
            text-shadow: 0 -1px 0 rgba(0,0,0,0.5);
        }
    }
    &.warning {
        background-color: #9e2812;
        background-image: url();
        background-image: linear-gradient(to bottom, #9e2812 0%, #6f0d0d 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9e2812', endColorstr='#6f0d0d',GradientType=0 );
        &:before {
            border-color: transparent #6f0d0d #6f0d0d transparent;
        }
        &:after {
            content: '\203C';
            color: #fc0;
            position: absolute;
            top: 15px;
            left: 15px;
            font-size: 32px;
            font-weight: 700;
            text-shadow: 0 -1px 0 rgba(0,0,0,0.5);
        }
    }
    &.unreleased {
        background-color: #cd9239;
        background-image: url();
        background-image: linear-gradient(to bottom, #cd9239 0%, #a27528 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cd9239', endColorstr='#a27528',GradientType=0 );
        &:before {
            border-color: transparent #664719 #664719 transparent;
        }
        &:after {
            content: '\2692';
            color: #2b2a12;
            position: absolute;
            top: 8px;
            left: 15px;
            font-size: 38px;
            font-weight: 700;
            text-shadow: 0 1px 0 rgba(255,255,255,0.25)
        }
    }
}
